<script  lang="ts" setup name="Preson432">
      // 数据，原来是写在data中的，此时的name、age、tel都不是响应式的数据
      let name = '张三'
      let age = 18
      let tel = 18888888888
      //  方法
      function changeName(){
        name = 'zhang-san' //注意：这样修改name，页面是没有变化的
        console.log(name)  //name确实改了，但name不是响应式的
      }
      function changeAge(){
        age += 1 //注意：这样修改age，页面是没有变化的
        console.log(age) //age确实改了，但age不是响应式的
      }
      function seeTel(){
        alert(tel)
      }
</script>

<template>
  <div class="prisonBox">
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="seeTel">查看联系方式</button>

  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>